<template>
  <div>
    <a-card>
      <a-form :form="form">
        <a-row>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="开课院系"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['ksyxm',
                {
                  rules: [{ required: true, message: '请选择培养单位!' }],
                }]" @change="yxChange" showSearch :filterOption="filterOption" :disabled="!!editId">
                <a-select-option v-for="i in selectMenu.yxList" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="课程名称"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['kcbm',
                {
                  rules: [{ required: true, message: '请选择课程!' }],
                }]" @change="kcChange" showSearch :filterOption="filterOption" :disabled="!!editId">
                <a-spin v-if="kcLoading" slot="notFoundContent" size="small"/>
                <a-select-option v-for="(i,index) in selectMenu.courseList" :key="index" :value="i.kch">{{ i.kch }}-{{ i.kcmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试形式"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['ksxsm',
                {
                  rules: [{ required: true, message: '请选择考试形式!' }],
                }]">
                <a-select-option v-for="i in TYPE0053" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试年级"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['ksnj',
                {
                  rules: [{ required: true, message: '请选择考试年级!' }],
                }]">
                <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="学分"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-input v-decorator="['xf']" disabled/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试性质"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['ksxzm',
                {
                  rules: [{ required: true, message: '请选择考试性质!' }],
                }]">
                <a-select-option v-for="i in TYPE0358" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试类别"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['kslbm',
                {
                  rules: [{ required: true, message: '请选择考试类别!' }],
                }]">
                <a-select-option v-for="i in TYPE0109" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试学年"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['ksxn',
                {
                  rules: [{ required: true, message: '请选择考试学年!' }],
                }]" @change="clearClassroom">
                <a-select-option v-for="i in TYPE0125" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试学期"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['ksxqm',
                {
                  rules: [{ required: true, message: '请选择考试学期!' }],
                }]" @change="clearClassroom">
                <a-select-option v-for="i in TYPE0072" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="开始课节"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['kskj',
                {
                  rules: [{ required: true, message: '请选择开始课节!' }],
                }]" @change="clearClassroom">
                <a-select-option v-for="i in TYPE0331.filter(i => i.code % 2 === 1)" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                <!-- <a-select-option v-for="i in TYPE0331" :key="i.id" :value="i.code">{{ i.name }}</a-select-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="结束课节"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['jskj',
                {
                  rules: [{ required: true, message: '请选择结束课节!' }],
                }]" @change="clearClassroom">
                <a-select-option v-for="i in TYPE0331.filter(i => i.code % 2 === 0)" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试人数"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-input v-decorator="['cjksrs',
                {
                  rules: [{ required: true, message: '请输入考试人数!' }],
                }]" @change="clearClassroom"/>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="8" :sm="12">
            <a-form-item
              label="考试周次"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-input v-decorator="['kszc',
                {
                  rules: [{ required: true, message: '请输入考试周次!' }],
                }]"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试周"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-input v-decorator="['ksz',
                {
                  rules: [{ required: true, message: '请输入考试周!' }],
                }]"/>
            </a-form-item>
          </a-col> -->
          <a-col :md="8" :sm="12">
            <a-form-item
              label="开始时间"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="['kskssj',
                {
                  rules: [{ required: true, message: '请选择开始时间!' }],
                }]" @change="clearClassroom"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="结束时间"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="['ksjssj',
                {
                  rules: [{ required: true, message: '请选择结束时间!' }],
                }]" @change="clearClassroom"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="考试时长(单位:分钟)"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-input v-decorator="['kssc',
                {
                  rules: [{ required: true, message: '请输入考试时长!' }],
                }]"/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
              label="备注"
              :labelCol="{span: 5,offset: 1}"
              :wrapperCol="{span: 17, offset: 1}"
            >
              <a-textarea v-decorator="['note']"/>
            </a-form-item>
          </a-col>
        </a-row>
        <div style="color:#E51C23;">修改考试学年、考试学期、开始课节、结束课节、考试时间、考试人数等信息将会清空教室信息。</div>
      </a-form>
    </a-card>

    <a-card>
      <h3>选择教室</h3>
      <detail-list :col="4">
        <detail-list-item term="校区">{{ examInfo.xqmc }}</detail-list-item>
        <detail-list-item term="教室类型">{{ examInfo.typeCodeName }}</detail-list-item>
        <detail-list-item term="教室">{{ examInfo.kcjsbh }}</detail-list-item>
        <a-button type="primary" @click="showChoose">选择教室</a-button>
      </detail-list>
    </a-card>

    <div class="ant-pro-footer-toolbar">
      <a-button style="float: right;margin-top: 10px;" @click="saveForm" :loading="loadingBtn" type="primary">确定保存</a-button>
      <a-button style="float: right;margin-top: 10px;margin-right: 20px" @click="back" type="primary">返回</a-button>
    </div>

    <classroom-modal
      ref="choose"
      :visible="chooseVisible"
      :editId="editId"
      @cancel="chooseVisible = false"
      @updateEx="updateEx"/>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import { DateToString } from '@/utils/common'
import DetailList from '~/tool/DetailList'
import classroomModal from './components/classroom'
const DetailListItem = DetailList.Item

export default {
  data () {
    return {
      form: this.$form.createForm(this),
      selectMenu: {},
      kcLoading: false,
      chooseVisible: false,
      editId: null,
      examInfo: {},
      loadingBtn: false
    }
  },
  components: {DetailList, DetailListItem, classroomModal},
  computed: {
    ...mapState({
      TYPE0125: state => state.app['TYPE0125'],
      TYPE0126: state => state.app['TYPE0126'],
      TYPE0072: state => state.app['TYPE0072'],
      TYPE0109: state => state.app['TYPE0109'],
      TYPE0331: state => state.app['TYPE0331'] || [],
      TYPE0053: state => state.app['TYPE0053'],
      TYPE0358: state => state.app['TYPE0358'],

    })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0125')
    this.$store.dispatch('app/setDictionary', 'TYPE0126')
    this.$store.dispatch('app/setDictionary', 'TYPE0072')
    this.$store.dispatch('app/setDictionary', 'TYPE0053')
    this.$store.dispatch('app/setDictionary', 'TYPE0358')
    this.$store.dispatch('app/setDictionary', 'TYPE0109')
    this.$store.dispatch('app/setDictionary', 'TYPE0331')
    this.initSelectMenu()
    if (this.$route.query.id) {
      this.editId = this.$route.query.id
      this.getInfo(this.editId)
    }
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yxList: res[0].data
        }
      })
    },
    getInfo (id) {
      this.$api.cultivate.examDetail(id).then(res => {
        this.examInfo = res.data
        let infoData = res.data
        this.yxChange(infoData.ksyxm, true)
        let keys = Object.keys(this.form.getFieldsValue())
        let obj = {}
        keys.forEach(key => {
          obj[key] = infoData[key]
        })
        this.form.setFieldsValue(obj)
      })
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    yxChange (code, init = false) {
      this.$set(this.selectMenu, 'courseList', [])
      if (!init) {
        this.form.setFieldsValue({kcbm: ''})
      }
      if (code) {
        this.kcLoading = true
        this.$api.cultivate.courseAll({kcssyxm: code}).then(res => {
          this.$set(this.selectMenu, 'courseList', res.data)
        }).finally(() => {
          this.kcLoading = false
        })
      } else {
        this.$set(this.selectMenu, 'courseList', [])
      }
    },
    kcChange (kch) {
      let kc = this.selectMenu.courseList.find(kc => {
        return kc.kch === kch
      })
      this.form.setFieldsValue({
        xf: kc.xf
      })
    },
    clearClassroom () {
      this.examInfo.xqmc = ''
      this.examInfo.typeCodeName = ''
      this.examInfo.kcjsbh = ''
    },
    showChoose (type) {
      this.$refs.choose.searchForm = Object.assign({}, this.form.getFieldsValue())
      this.chooseVisible = true
    },
    updateEx (data) {
      this.pkInfo = Object.assign(this.examInfo, data)
    },
    saveForm () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        values.kskssj = values.kskssj.format('YYYY-MM-DD HH:mm:ss')
        values.ksjssj = values.ksjssj.format('YYYY-MM-DD HH:mm:ss')
        values.id = this.$route.query.id
        let params = Object.assign({}, this.examInfo, values)
        DateToString(params)
        let apiFn = this.$route.query.id ? 'examUpdate' : 'examAdd'
        delete params.cjksxsmdList
        this.$api.cultivate[apiFn](params).then(res => {
          this.$message.success(res.msg)
          this.$router.back()
        })
      })
    },
    back() {
      this.$router.back()
    }
  }
}
</script>

<style>

</style>
